<template>
  <div class="group lg:grid-cols-2 lg:gap-6 grid grid-cols-1 gap-4">
    <div
      class="flex flex-col col-span-1 gap-4 bg-[#F9F9FA] rounded-[1rem] lg:p-5 p-3 hover:shadow-sm duration-300"
      v-for="(item, index) in evaluateList"
      :key="index"
    >
      <div class="flex flex-nowrap justify-between items-center">
        <div class="flex flex-1 gap-4 items-center">
          <div class="size-[2.25rem] rounded-full overflow-hidden flex-none">
            <img
              class="size-full"
              loading="lazy"
              v-lazy="$globalFn.imgPrefixUrl(item.avatar, 'goods_thumb_1_1')"
              alt="User avatar"
              title="Review author"
              srcset=""
            />
          </div>
          <div class="flex flex-col justify-between">
            <div class="font-medium text-[0.88rem] text-[#121212] line-clamp-1">
              {{ item.nickname }}
            </div>
            <div class="flex gap-1 items-center w-full">
              <div class="" v-for="num in 5" :key="num">
                <img
                  class="size-3"
                  loading="lazy"
                  v-if="item.score < num"
                  src="https://cd.sealmg.com/assets/img/star-gray.png"
                  alt="Empty star"
                  title="Rating star"
                  srcset=""
                />
                <img
                  class="size-3"
                  loading="lazy"
                  v-else
                  src="https://cd.sealmg.com/assets/img/star-mini.png"
                  alt="Filled star"
                  title="Rating star"
                  srcset=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="font-semibold text-[0.75rem] flex-none text-[#999999] text-nowrap">
          {{ item.create_time_text }}
        </div>
      </div>
      <p class="font-medium text-[0.75rem] text-[#666666]">
        {{ item.content }}
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        evaluateList: this.dataList
      }
    },
    watch: {
      dataList: {
        handler(newVal) {
          this.evaluateList = newVal
        },
        deep: true,
        immated: true
      }
    },
    computed: {},
    created() {},
    methods: {}
  }
</script>
